<template>
  <div id="rose-chart">
      <div id="he-plugin-standard"></div>
  </div>
</template>

<script>
export default {
  name: 'RoseChart',
  data () {
    return {
      option: {}
    }
  },
  methods: {
    setWeather(d) {
      var c = d.createElement('link')
      c.rel = 'stylesheet'
      c.href = 'https://widget.heweather.net/standard/static/css/he-standard.css?v=1.4.0'
      var s = d.createElement('script')
      s.src = 'https://widget.heweather.net/standard/static/js/he-standard.js?v=1.4.0'
      var sn = d.getElementsByTagName('script')[0]
      sn.parentNode.insertBefore(c, sn)
      sn.parentNode.insertBefore(s, sn)
    },
    randomExtend (minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
    }
  },
  mounted () {
    window.WIDGET = {
      "CONFIG": {
        "layout": "2",
        "width": 300,
        "height": 400,
        "background": "1",
        "dataColor": "FFFFFF",
        "borderRadius": "5",
        "fixed": "false",
        "vertical": "center",
        "horizontal": "center",
        "city": "CN101121307",
        "key": "f7caefe64c28431292600c7735a1df15",
      }
    }
    this.setWeather(document)
  }
}
</script>

<style lang="less">
#rose-chart {
  width: 20%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;

  .he-plugin-standard {
    height: calc(~"100% - 50px");
  }
}
</style>
